<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(item, i) in newRoute.matched"
        :to="item.fullPath ? item.fullPath : item.path"
        :key="i"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
      <!-- <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item> -->
    </el-breadcrumb>
    <div style="margin-bottom: 20px"></div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      newRoute: {},
    };
  },
  watch: {
    $route: function (to) {
      console.log(to, "to");
      const { fullPath, matched } = to;
      // 全路径存储
      matched[matched.length - 1].fullPath = fullPath;
      console.log(matched, "matched");
      // 保留上一次父级全路径
      const fromMatched = this.newRoute.matched;
      console.log(fromMatched, "fromMatched");
      if (fromMatched && fromMatched.length < matched.length) {
        fromMatched.push(matched[matched.length - 1]);
        this.newRoute = { ...to, matched: fromMatched };
      } else {
        this.newRoute = { ...to, matched: matched };
        console.log(this.newRoute, "this.newRoute");
      }
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>
